<template>
   <div>
    <h1>预约列表</h1>
    <el-collapse accordion>
      <el-collapse-item :title="getTitle(b)"
           :name="b.id" v-for="b in books" :key="b.id" >
        <div class="link">
          <b>科室:{{b.map.deptname}}</b>&nbsp;&nbsp;
          <b>医生:{{b.map.doc?.name}}</b>&nbsp;&nbsp;
          <b>诊室:{{b.plan.room}}</b>&nbsp;&nbsp;
          <b>挂号费:{{b.plan.fee}}</b>&nbsp;&nbsp;
          <b>状态:{{states[b.state-1]}}</b>&nbsp;&nbsp;<br/>
          <b>下单时间:{{b.bookTime}}</b> 

          <div class="btn_doc" style="margin-top:0px">
              <el-button type="success" round size="small" v-if="b.map.isShowCancel" @click="cancel(b.id)">取消</el-button>
          </div>
        </div>
        <div class="txt">
          如果安排有变化，可以提前1天取消
        </div>
      </el-collapse-item>
    </el-collapse>
    </div>
</template>

<script>
import { useRoute,useRouter } from 'vue-router'
export default {
   inject:["global"],
   data(){
       return{
           states:["正常","取消","已结束"],
           books:[]
       }
   },
   mounted:function(){
     this.loadBooks();
   },
   methods:{
     getTitle:function(b){
       return b.plan.workDateString+'【'+(b.plan.workTime==1?'上午':'下午')+'】'+b.map.doc?.name+'医生【'+this.states[b.state-1]+'】';
     },
     loadBooks:function(){
       const axios=this.global.axios;
       axios.get("http://192.168.2.5:9000/hp/order/book/mybooks")
       .then(resp=>{
           this.books=resp.data.obj;
       })
     },
     cancel:function(bookid){
       const axios=this.global.axios;
       axios.post("http://192.168.2.5:9000/hp/order/book/cancel","bookid="+bookid)
       .then(resp=>{
           alert(resp.data.msg);
           this.loadBooks();
       })
     }
   }
}
</script>

<style scoped>
   .txt,.link{text-align: left;}
   .btn_doc{float:right}
</style>